<template>
    <div class="content">
        <Form :label-width="140" :model="form" ref="form" :rules="rules">
            <FormItem label="公告标题" prop="title">
                <Input
                    v-model="form.title"
                    :maxlength="50"
                    placeholder="请输入公告标题"
                ></Input>
            </FormItem>
            <FormItem label="发布时间" prop="publishTime">
                <DatePicker
                    :value="form.publishTime"
                    @on-change="dateChange"
                    type="datetime"
                    placeholder="请选择发布时间"
                ></DatePicker>
            </FormItem>
            <FormItem label="状态" prop="isValid">
                <Select
                    style="width: 172px;"
                    placeholder="状态"
                    v-model="form.isValid"
                >
                    <Option :value="1">有效</Option>
                    <Option :value="0">失效</Option>
                </Select>
            </FormItem>
            <FormItem label="公告正文" prop="content">
                <Input
                    type="textarea"
                    v-model="form.content"
                    :maxlength="50"
                ></Input>
            </FormItem>
            <FormItem>
                <div class="submit-footer">
                    <Button type="primary" @click="submit">保存</Button>
                    <Button @click="handleCancel">取消</Button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { addNotice, updateNotice, queryNoticeInfo } from '@/api/notice'

export default {
    inject: ['nextPageReload'],
    data () {
        return {
            form: {
                content: '',
                noticeId: '',
                publishTime: '',
                remark: '',
                title: '',
                isValid: ''
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: '请输入公告标题',
                        trigger: 'blur'
                    }
                ],
                publishTime: [
                    {
                        required: true,
                        message: '请选择发布时间',
                        trigger: 'change'
                    }
                ],
                isValid: [
                    {
                        required: true,
                        message: '请选择状态',
                        type: 'number',
                        trigger: 'change'
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请输入公告正文',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted () {
        const id = this.$route.params.id
        if (id) {
            this.queryInfo(id)
        }
    },
    methods: {
        ...mapMutations(['removeTagNav']),
        dateChange (v) {
            this.form.publishTime = v
        },
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    const valid = this.form.isValid === 1
                    const fn = this.form.noticeId ? updateNotice : addNotice
                    fn({
                        ...this.form,
                        valid
                    }).then(res => {
                        if (res.data.code === '0000') {
                            this.$Message.success(`保存成功`)
                            this.nextPageReload()
                            this.handleCancel()
                        } else {
                            this.$Message.error(res.data.msg)
                        }
                    })
                }
            })
        },
        handleCancel () {
            this.removeTagNav(this.$route)
            this.$router.replace({
                name: 'noticeManageList'
            })
        },
        setFormByInfo (data) {
            if (!data) return
            Object.keys(this.form).forEach(k => {
                if (data.hasOwnProperty(k)) {
                    this.form[k] = data[k]
                }
            })
            if (typeof data.valid === 'boolean') {
                this.form.isValid = data.valid ? 1 : 0
            } else {
                this.form.isValid = ''
            }
        },
        queryInfo (id) {
            queryNoticeInfo(id).then(res => {
                if (res.data.code === '0000') {
                    this.setFormByInfo(res.data.data)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-form {
    max-width: 800px;
}
</style>
